<template>
  <div>
    <!-- data环状图 -->
    <div ref="chart" style="width: 100%; height: 300px"></div>
  </div>
</template>
<style></style>
<script>
import * as echarts from "echarts";
import { appRiskCount } from "@/api/applicationService/data";

export default {
  data() {
    return {
      allData: [],
      AllNum: 0,
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      appRiskCount().then((res) => {
        if (res.code == "200") {
          this.allData = [];
          res.data.map((item) => {
            if(item.name!=='其他'){
              this.allData.push(item);
              this.AllNum = this.AllNum + item.value;
            }
           
          });
          this.createPieChart();
        }
      });
    },
    createPieChart() {
      const chart = echarts.init(this.$refs.chart);
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c}",
        },
        legend: {
          show: true,
          orient: "vertical",
          right: "1%",
          top: "middle",
          itemWidth: 25,
          itemHeight: 15,
          textStyle: {
            fontSize: 10,
            fontWeight: "bold",
            color: "#000",
          },
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "60%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "outside",
              textStyle: {
                fontSize: 12,
                fontWeight: "bold",
                color: "#000",
              },
            },
            labelLine: {
              show: true,
              length2: 50,
              maxSurfaceAngle: 80,
            },
            data: this.allData,
          },
          {
            type: "pie",
            radius: ["50%", "50%"],
            label: {
              show: true,
              position: "center",
              textStyle: {
                fontSize: 16,
                fontWeight: "bold",
              },
            },
            data: [
              {
                value: this.AllNum,
                name: "总量",
                itemStyle: {
                  color: "#ccc",
                },
                label: {
                  show: true,
                  position: "center",
                  formatter: function (params) {
                    return params.value;
                  },
                },
              },
            ],
          },
        ],
      };
      chart.setOption(option);
    },
  },
};
</script>
